<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Oracle Viewer - 用户卡片查询工具</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .api-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .api-section h3 {
            color: #007bff;
            margin-top: 0;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            margin-top: 15px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 5px;
            white-space: pre-wrap;
            max-height: 400px;
            overflow-y: auto;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
        }
        input {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Oracle Viewer - 用户卡片查询工具</h1>
        
        <div class="api-section">
            <h3>1. 查询所有用户卡片数据</h3>
            <button onclick="getAllUserCards()">查询所有数据</button>
            <div id="allResult" class="result"></div>
        </div>
        
        <div class="api-section">
            <h3>2. 根据用户ID查询</h3>
            <input type="text" id="userId" placeholder="请输入用户ID">
            <button onclick="getUserCardsByUserId()">查询</button>
            <div id="userIdResult" class="result"></div>
        </div>
        
        <div class="api-section">
            <h3>3. 根据卡片号查询</h3>
            <input type="text" id="cardNo" placeholder="请输入卡片号">
            <button onclick="getUserCardByCardNo()">查询</button>
            <div id="cardNoResult" class="result"></div>
        </div>
        
        <div class="api-section">
            <h3>4. 根据状态查询</h3>
            <input type="text" id="status" placeholder="请输入状态">
            <button onclick="getUserCardsByStatus()">查询</button>
            <div id="statusResult" class="result"></div>
        </div>
        
        <div class="api-section">
            <h3>5. 根据卡片类型查询</h3>
            <input type="text" id="cardType" placeholder="请输入卡片类型">
            <button onclick="getUserCardsByCardType()">查询</button>
            <div id="cardTypeResult" class="result"></div>
        </div>
        
        <div class="api-section">
            <h3>6. 获取统计信息</h3>
            <button onclick="getStatistics()">获取统计</button>
            <div id="statisticsResult" class="result"></div>
        </div>
        
        <div class="api-section">
            <h3>7. 健康检查</h3>
            <button onclick="healthCheck()">健康检查</button>
            <div id="healthResult" class="result"></div>
        </div>
    </div>

    <script>
        const baseUrl = 'http://localhost:8080/api/usercards';
        
        async function makeRequest(url, resultId) {
            const resultDiv = document.getElementById(resultId);
            resultDiv.textContent = '正在请求数据...';
            resultDiv.className = 'result';
            
            try {
                const response = await fetch(url);
                const data = await response.json();
                
                if (data.success) {
                    resultDiv.textContent = JSON.stringify(data, null, 2);
                    resultDiv.className = 'result success';
                } else {
                    resultDiv.textContent = '错误: ' + data.message;
                    resultDiv.className = 'result error';
                }
            } catch (error) {
                resultDiv.textContent = '请求失败: ' + error.message;
                resultDiv.className = 'result error';
            }
        }
        
        function getAllUserCards() {
            makeRequest(`${baseUrl}/all`, 'allResult');
        }
        
        function getUserCardsByUserId() {
            const userId = document.getElementById('userId').value;
            if (!userId) {
                alert('请输入用户ID');
                return;
            }
            makeRequest(`${baseUrl}/user/${userId}`, 'userIdResult');
        }
        
        function getUserCardByCardNo() {
            const cardNo = document.getElementById('cardNo').value;
            if (!cardNo) {
                alert('请输入卡片号');
                return;
            }
            makeRequest(`${baseUrl}/card/${cardNo}`, 'cardNoResult');
        }
        
        function getUserCardsByStatus() {
            const status = document.getElementById('status').value;
            if (!status) {
                alert('请输入状态');
                return;
            }
            makeRequest(`${baseUrl}/status/${status}`, 'statusResult');
        }
        
        function getUserCardsByCardType() {
            const cardType = document.getElementById('cardType').value;
            if (!cardType) {
                alert('请输入卡片类型');
                return;
            }
            makeRequest(`${baseUrl}/type/${cardType}`, 'cardTypeResult');
        }
        
        function getStatistics() {
            makeRequest(`${baseUrl}/statistics`, 'statisticsResult');
        }
        
        function healthCheck() {
            makeRequest(`${baseUrl}/health`, 'healthResult');
        }
    </script>
</body>
</html> 